<template>
	<div>
		<!-- 绑定公众号 -->
		<cl-dialog
			title="上传公众号素材"
			:visible.sync="accountVisible"
			width="620px"
			:props="{ appendToBody: true }"
		>
			<el-form ref="form" :model="form" :rules="rules" label-position="top">
				<el-form-item prop="app_id">
					<div class="flex flex-justify-center">
						<el-transfer
							v-model="form.app_id"
							filterable
							:data="accountList"
							:props="{
								key: 'id',
								label: 'nick_name'
							}"
							:titles="['未上传', '已上传']"
							:render-content="renderContent"
						/>
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" @click="submit">上传</el-button>
				<el-button @click="close">取消</el-button>
			</template>
		</cl-dialog>
	</div>
</template>
<script>
import axios from "axios";
export default {
	data() {
		return {
			accountVisible: false,
			form: {
				id: "",
				biz_id: "",
				app_id: []
			},
			rules: {
				app_id: [{ required: true, message: "请选择公众号" }]
			},
			accountList: [],
			saving: false
		};
	},
	methods: {
		open(data = {}) {
			this.accountVisible = true;
			this.form = { ...data };
			this.init();
		},
		close() {
			this.form.app_id = [];
			this.$refs.form.resetFields();
			this.accountVisible = false;
		},
		async init() {
			const { id } = this.form;
			const res = await this.$service.config.wxList({
				// biz_id,
				// bra_id
				size: 99999,
				model_id: id
			});
			this.accountList = res?.data?.map?.(v => ({ ...v, disabled: v.upload_status == 1 }));
		},
		renderContent(h, option) {
			return (
				<el-tooltip
					content={option.upload_name}
					placement="top"
					disabled={option.upload_status != 1}>
					<div class="ellipsis">{option.nick_name}</div>
				</el-tooltip>
			);
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				let { biz_id, app_id, id } = this.form;
				this.saving = true;
				await this.$service.config.addMaterial({ app_id, id }).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.close();
				this.$emit("confirm", biz_id, false);
			});
		}
	}
};
</script>
